<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div class="k-title">数据统计</div>
    </template>
    <div ref="chartRef" style="width: 100%; height: 33vh" />

    <div />
  </el-card>
</template>

<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { ref, computed, nextTick, onMounted } from "vue";

import { chartDataApi } from "@/api/home";
const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();

// 数据
// const xData = ref(["登录", "借出", "未归还", "报修"]);
const yData1 = ref([]); // 一周
const yData2 = ref([]); // 一月

const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});

chartDataApi({}).then(res => {
  const data = { ...res.data } as any;

  yData1.value = [
    data.weekReportFixCount,
    data.weekNoReturnCount,
    data.weekLendCount,
    data.weekLoginCount
  ];
  yData2.value = [
    data.monthReportFixCount,
    data.monthNoReturnCount,
    data.monthLendCount,
    data.monthLoginCount
  ];

  nextTick(() => initData());
});

const initData = () => {
  setOptions({
    legend: {
      data: ["近一周", "近一个月"],
      left: "right",
      icon: "rect",
      itemWidth: 8,
      itemHeight: 8
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "10%",
      containLabel: true
    },
    xAxis: {
      type: "value"
    },
    yAxis: {
      type: "category",
      data: ["报修", "超期未归还", "借出", "登录"],
      show: true
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    series: [
      {
        name: "近一周",
        type: "bar",
        data: yData1.value,
        itemStyle: {
          color: "#1366F5"
        }
      },
      {
        name: "近一个月",
        type: "bar",
        data: yData2.value,
        itemStyle: {
          color: "#4FCCF9"
        }
      }
    ]
  });
};

/* test-data */
// const res = {
//   code: 200,
//   msg: "操作成功",
//   data: {
//     weekLoginCount: 104,
//     monthLoginCount: 104,
//     weekLendCount: 4019,
//     monthLendCount: 4019,
//     weekNoReturnCount: 5,
//     monthNoReturnCount: 5,
//     weekReportFixCount: 3,
//     monthReportFixCount: 3
//   }
// };
// const data = { ...res.data } as any;

// yData1.value = [
//   data.weekReportFixCount,
//   data.weekNoReturnCount,
//   data.weekLendCount,
//   data.weekLoginCount
// ];
// yData2.value = [
//   data.monthReportFixCount,
//   data.monthNoReturnCount,
//   data.monthLendCount,
//   data.monthLoginCount
// ];
// initData();
/* ==================== */
</script>
